<page-header [title]="orderNu">
  <!-- <ng-template #logo>
    <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
  </ng-template> -->
  <ng-template #action>
    <!-- <nz-button-group>
      <button nz-button>操作</button>
      <button nz-button>操作</button>
    </nz-button-group>
    <nz-dropdown class="mx-sm">
      <button nz-button nz-dropdown>
        <i class="anticon anticon-ellipsis"></i>
      </button>
      <ul nz-menu>
        <li nz-menu-item>选项一</li>
        <li nz-menu-item>选项二</li>
        <li nz-menu-item>选项三</li>
      </ul>
    </nz-dropdown> -->
    <button nz-button [nzType]="'primary'" (click)="shipping(modalContent)">发货</button>
    <button nz-button [nzType]="'primary'">退款</button>
  </ng-template>
  <ng-template #extra>
    <div nz-row>
      <div nz-col nzXs="24" nzSm="12">
        <p class="text-grey">状态</p>
        <p class="text-lg">{{detail.payStatus}}</p>
      </div>
      <div nz-col nzXs="24" nzSm="12">
        <p class="text-grey">订单金额</p>
        <p class="text-lg">¥ {{detail.sumPrice}}</p>
      </div>
    </div>
  </ng-template>

  <desc-list size="small" col="2">
    <desc-list-item term="订单类型">{{detail.orderType}}</desc-list-item>
    <desc-list-item term="创建时间">{{detail.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</desc-list-item>
    <desc-list-item term="备注">{{detail.remarks}}</desc-list-item>
  </desc-list>

</page-header>

<nz-card [nzBordered]="false" class="mb-lg" nzTitle="流程进度">
  <nz-steps [nzCurrent]="3" nzProgressDot>
    <nz-step [nzTitle]="'下单'" [nzDescription]="createDesc">
      <ng-template #createDesc>
        <div class="desc">
          <!-- <div class="my-sm">曲丽丽
            <i class="anticon anticon-dingding-o ml-sm"></i>
          </div> -->
          <div>2016-12-12 12:32</div>
        </div>
      </ng-template>
    </nz-step>
    <nz-step [nzTitle]="'支付'" [nzDescription]="checkedPay">
      <ng-template #checkedPay>
        <div class="desc">
          <div>2016-12-12 12:32</div>
        </div>
      </ng-template>
    </nz-step>
    <nz-step [nzTitle]="'发货'" [nzDescription]="checkedSend">
      <ng-template #checkedSend>
        <div class="desc">
          <div>2016-12-12 12:32</div>
        </div>
        <!-- <a (click)="shipping(modalContent)">编辑</a> -->
      </ng-template>
    </nz-step>
    <nz-step [nzTitle]="'收货'" [nzDescription]="checkedReceive">
      <ng-template #checkedReceive>
        <div class="desc">
          <div>2016-12-12 12:32</div>
        </div>
      </ng-template>
    </nz-step>
    <nz-step [nzTitle]="'完成'"[nzDescription]="checkedComplete">
      <ng-template #checkedComplete>
        <div class="desc">
          <div>2016-12-12 12:32</div>
        </div>
      </ng-template>
    </nz-step>
  </nz-steps>
  <div class="steps-content"></div>
</nz-card>

<nz-card [nzBordered]="false" nzTitle="客户信息" class="mb-lg">
  <desc-list class="mb-lg">
    <desc-list-item term="姓名">{{detail.customerName}}</desc-list-item>
    <desc-list-item term="电话">{{detail.telNumber}}</desc-list-item>
    <desc-list-item term="地区">{{detail.provinceCityCounty}}</desc-list-item>
    <desc-list-item term="地址">{{detail.detailInfo}}</desc-list-item>
  </desc-list>

</nz-card>

<nz-card [nzBordered]="false" nzTitle="订单详情" class="mb-lg">
  <simple-table [columns]="columns" [data]="data" [loading]="loading">
    <ng-template st-row="status" let-i>
      <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'成功'"></nz-badge>
      <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'进行中'"></nz-badge>
    </ng-template>
  </simple-table>
</nz-card>

<ng-template #modalContent>
    <form nz-form [formGroup]="form">
        <nz-form-item>
            <nz-form-label nzXs="5" nzRequired nzFor="from">快递公司</nz-form-label>
            <nz-form-control nzXs="18">
                <nz-select formControlName="expressCompany" [nzShowSearch]="true">
                    <nz-option *ngFor="let i of expressCompanyList; let idx = index" [nzLabel]="i.name" [nzValue]="i.code"></nz-option>
                </nz-select>
                <nz-form-explain *ngIf="form.get('expressCompany').dirty && form.get('expressCompany').errors">不能为空</nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label nzXs="5" nzRequired nzFor="weixin">快递单号</nz-form-label>
            <nz-form-control nzXs="18">
                <input nz-input formControlName="expressNu" placeholder="">
                <nz-form-explain *ngIf="form.get('expressNu').dirty && form.get('expressNu').errors">不能为空</nz-form-explain>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>